/**
 * 事故单详情
 */

import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import React, { useState, useCallback, useEffect } from 'react';
import { useRequest } from '@umijs/hooks';
import { Row, Col, Button, Card, Tabs  } from 'antd';
import styles from './index.less';
import moment from 'moment';
import router from 'umi/router';

import {
  expressTransportationDetail,
} from './service';
import {
  Const
} from '../Const';

const { TabPane } = Tabs;

class PrivateData {
  static oldInfoList = [
    { label: '旧行李号', value: 'oldPkgNo' },
    { label: '旧航班日期', value: 'oldFlightDate' },
    { label: '旧航班号', value: 'oldFlightNo' },
  ];
  static newInfoList = [
    { label: '新行李号', value: 'newPkgNo' },
    { label: '新航班日期', value: 'newFlightDate' },
    { label: '新航班号', value: 'newFlightNo' },
    { label: '始发站', value: 'org' },
    { label: '目的站', value: 'dst' },
    { label: '速运行李航程', value: 'voyage' },
    { label: '该行李重量', value: 'weight' },
  ];
  static createList = [
    { label: '创建人', value: 'createUser' },
    { label: '创建时间', value: 'createDate' },
    { label: '创建机场三字码', value: 'createTerminal' },
    { label: '创建机场联系方式', value: 'terminalContact' },
  ];
  static otherList = [
    { label: '速运类型', value: 'type', isMap: 'suYunTypeMap' },
    { label: '最新通知时间', value: 'latestNotificationTime' },
    { label: '多收编号', value: 'accidentId' },
    { label: '是否通知', value: 'isNotice', isMap: 'isNoticeMap' },
    { label: '行李颜色', value: 'pkgColor' },
    { label: '行李类型', value: 'pkgType' },
    { label: '行李描述', value: 'pkgContent' },
    { label: '速运原因', value: 'reason' },
  ];
}

const IncidentDetail = props => {

  const { location: { state } } = props;

  const [detailInfo, setDetailInfo] = useState({}); // 详情


  // 获取详情
  const { run: runExpressTransportationDetail } = useRequest(params => expressTransportationDetail(params), {
    manual: true,
    onSuccess (res) {
      console.log(res, '获取详情');
      setDetailInfo(res || {});
    }
  });

  const getDetail = useCallback(() => {
    runExpressTransportationDetail({
      id: state?.id || ''
    })
  }, [state]);

  useEffect(() => {
    getDetail();
  }, [state]);

  const dealDetailInfo = useCallback((item) => {
    if (item.isMap) {
      return Const[item.isMap][detailInfo[item.value]]?.text || '';
    } else {
      return (detailInfo[item.value] || '') + (item.unit || '');
    }
  }, [detailInfo]);

  return (
    <div className={styles.accidentDetailContent}>
      <Row className={styles.topBox}>
        <Col span={24} style={{ paddingLeft: '10px' }}>
          <Row style={{ height: '40px', lineHeight: '40px' }}>
            <Col span={24}>
              <div style={{ color: '#000000', fontWeight: 'bold' }}>速运行李详情</div>
            </Col>
          </Row>
          <Row style={{ marginTop: '10px' }}>
            <Col span={24}>
              <div>速运编号：{detailInfo.expressTransportationNo || ''}</div>
              <div>详情类型：速运</div>
              <div>速运类型：{Const.suYunTypeMap[detailInfo.type || '']?.text || ''}</div>
            </Col>
          </Row>
        </Col>
      </Row>
      <div className={styles.middleContent}>
        <Tabs defaultActiveKey="1">
          <TabPane tab="详情" key="1">
            <div className={styles.infoBox}>
              <Card title="旧行李信息">
                <div className={styles.itemBox}>
                  {PrivateData.oldInfoList.map((item, index) => (
                    <div>{item.label ? item.label  + '：' : ''}{dealDetailInfo(item)}</div>
                  ))}
                </div>
              </Card>
              <Card title="新行李信息">
                <div className={styles.itemBox}>
                  {PrivateData.newInfoList.map((item, index) => (
                    <div>{item.label ? item.label  + '：' : ''}{dealDetailInfo(item)}</div>
                  ))}
                </div>
              </Card>
              <Card title="创建信息">
                <div className={styles.itemBox}>
                  {PrivateData.createList.map((item, index) => (
                    <div>{item.label ? item.label  + '：' : ''}{dealDetailInfo(item)}</div>
                  ))}
                </div>
              </Card>
              <Card title="其余信息">
                <div className={styles.itemBox}>
                  {PrivateData.otherList.map((item, index) => (
                    <div>{item.label ? item.label  + '：' : ''}{dealDetailInfo(item)}</div>
                  ))}
                </div>
              </Card>
            </div>
          </TabPane>
        </Tabs>
      </div>
      <div className={styles.footerBtn}>
        <Button type="primary" onClick={() => {router.goBack()}}>返回</Button>
      </div>
    </div>
  )
};

export default IncidentDetail;
